<style type="text/css">
    [v-cloak] { display: none }
    .bg-card-blue{
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
        color: #ffffff;
    }
    .bg-card-red{
        background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
        color: #ffffff;
    }
    .bg-card-violet {
        background: linear-gradient(-113deg, #c543d8, #925cc3);
        color: #ffffff;
    }
    .bg-card-primary {
        background: linear-gradient(-141deg, #ecca1b, #f39526);
        color: #ffffff;
    }
    .wanlcard .small-box,.panel{
        border-radius: 10px;
    }
    .wanlcard .small-box > .inner{
        padding: 15px 22px;
    }
    .wanlcard .small-box > .inner p:last-child{
        font-size: 12px;
    }
    .wanlcard .small-box p{
        font-size: 14px;
        margin: 10px 0;
    }
    .wanlcard .small-box h3{
        font-weight: 100;
    }
    .wanlcard .small-box .icon{
        color: rgba(255, 255, 255, 0.16);
        right: 22px;
    }

    .small-box .icon{
        font-size: 80px;
    }

    .panel-statistics h3 {
        font-weight: 500;
        font-size: 14px;
        color: #333;
        margin-top: 9.2px;
    }

    .panel-statistics h4{
        color: #666;
        font-weight: 400;
        font-size: 14px;
    }
    .panel-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: -9px;
    }
    .wanl-order .panel{
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
    }
    .wanl-order .panel h3{
        font-weight: 500;
    }
    .wanl-order .panel h3, .wanl-order .panel h4{
        color: #ffffff;
    }
    .wanl-order .pull-left .fa{
        color: #ffffff;
        font-size: 30px;
    }
    .wanllist .panel-statistics h4 {
        color: #555;
        font-weight: bold;
        font-size: 18px;
    }
    .wanllist .panel-statistics thead{
        color: #777777;
    }
    .vertical{
        vertical-align: middle;
    }

    .table > thead > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > th,
    .table > tbody > tr > td
    {
        padding: 12px 0;
        font-weight: initial;
    }

    .table > tbody > tr > td:first-child {
        color: #666666;
    }
    .wanlcard{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
</style>
<div class="panel panel-default panel-intro">

    <div class="row wanlcard">
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-card-blue">
                <div class="inner">
                    <p>平台</p>
                    <h3></h3>
                    <div>
                        <p id="platform-settled">已结算金额:</p>
                        <p id="platform-unsettled">未结算金额:</p>
                    </div>

                </div>

            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-card-red">
                <div class="inner">
                    <p>店铺</p>
                    <h3></h3>
                    <div>
                        <p id="shop-settled">已结算金额:</p>
                        <p id="shop-unsettled">未结算金额:</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-card-violet">
                <div class="inner">
                    <p>自提店</p>
                    <h3></h3>
                    <div>
                        <p id="spot-settled">已结算金额:</p>
                        <p id="spot-unsettled">未结算金额:</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-del="{:$auth->check('wanlshop/auth/del')}" width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
